<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>用户注册</title>
<!-- Favicon icon -->
<link rel="icon" type="image/png"
	href="${path }/assets/images/favicon-32x32.png">
<!-- Base Styling  -->
<link rel="stylesheet" href="${path }/assets/main/css/fonts.css">
<link rel="stylesheet" href="${path }/assets/main/css/style.css">
<link rel="stylesheet" href="${path }/css/slider.css">

</head>

<body>
	<div id="main-wrapper" class="show">

		<div class="container-fluid">
			<div class="row">
				<div class="col-xl-7 p-0 b-center bg-size">
					<img class="img-fluid" src="${path }/assets/images/bg-register.png"
						alt="tabib app">
				</div>
				<div class="col-xl-5 p-0">
					<div class="login-tabib">
						<div>
							<div class="text-center">
								<a class="logo"> <img class="img-fluid"
									src="${path }/assets/images/logo.png" alt="loogin page">
								</a>
							</div>
							<div class="login-main">
								<form action="${path }/UserinfoController?action=registe"
									method="post" class="theme-form" id="addForm">
									<h4>注册账号</h4>
									<div class="form-group m-b-10">
										<label class="col-form-label pt-0">昵称</label>
										<div class="row g-2">
											<div class="col-md-12 col-lg-6">
												<div class="form-group mb-0">
													<input class="form-control" type="text"
														placeholder="请输入5-8位数字字母" name="nickname" id="nickname"
														type="text"> <span id="nicknameMes"></span>
												</div>
											</div>

										</div>
									</div>
									<div class="form-group m-b-10">
										<label class="col-form-label">账号</label> <input
											class="form-control" name="regUsername" id="regUsername"
											type="text" placeholder="请输入3-15位的大小写字母或者数字"><span
											id="regUsernameMes"></span>
									</div>
									<div class="form-group m-b-10">
										<label class="col-form-label">密码</label>
										<div class="form-input position-relative">
											<input class="form-control" name="regUserpass"
												id="regUserpass" type="password"
												placeholder="请输入6-12位的大小写字母或者数字"> 
												<span id="regUserpassMes"></span>
											<div class="show-hide">
												<span class="show"></span>
											</div>
										</div>
									</div>
									<div id="demo">
										<div id="slider">
											<div id="slider_bg"></div>
											<span id="label">>></span> <span id="labelTip">拖动滑块验证</span>
										</div>
										<span id="regSliderMes"></span>
									</div>
									<div class="form-group mb-0">
										<div class="checkbox p-0">
											<input id="checkbox1" type="checkbox"> <label
												class="text-muted" for="checkbox1">同意<a
												class="ms-2 text-primary" href="https://baike.baidu.com/item/%E5%9B%BD%E5%AE%B6%E8%88%AA%E5%A4%A9%E5%B1%80/1759449?fr=aladdin">相关协议</a></label>
										</div>
										<button class="btn btn-primary w-100" type="submit"
											id="regSubmit">创建账户</button>
									</div>
									<p class="mt-4 mb-0">
										已存在账号?<a class="ms-2 text-primary" href="${path }/web/userLogin.jsp">登录</a>
									</p>
									<a href="${path }/web/index.jsp">返回首页</a>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

	<!-- JQuery v3.5.1 -->
	<script src="assets/plugins/jquery/jquery.min.js"></script>

	<!-- popper js -->
	<script src="assets/plugins/popper/popper.min.js"></script>

	<!-- Bootstrap -->
	<script src="assets/plugins/bootstrap/js/bootstrap.js"></script>

	<!-- Moment -->
	<script src="assets/plugins/moment/moment.min.js"></script>

	<!-- Date Range Picker -->
	<script src="assets/plugins/daterangepicker/daterangepicker.min.js"></script>

	<!-- Main Custom JQuery -->
	<script src="assets/js/toggleFullScreen.js"></script>
	<script src="assets/js/main.js"></script>

</body>
<script src="${path}/js/jquery-3.6.0.min.js"></script>
<script src="${path}/js/slideunlock.js"></script>
<script type="text/javascript">
	var slider;
	//滑动验证
	var verification = false;

	function initSileder() {
		slider = new SliderUnlock("#slider", {
			successLabelTip : "验证通过~"
		}, function() {
			verification = true;
		});
		slider.init();
	}

	//滑动验证的初始化
	function resetSlider() {
		slider.reset();
		slider.init();
		$("#labelTip").html("请重新验证");
		verification = false;
	}
	

	var regFlag1 = false;
	var regFlag2 = false;
	var regFlag3 = false;
	//注册页面正则表达式判断昵称是否合格
	function nicknameCheck() {
		var nickname = $("#nickname").val();
		var nicknameExp = /^[\u4e00-\u9fa5a-zA-Z0-9]{5,8}$/;
		if (nicknameExp.test(nickname)) {
			$("#nicknameMes").css("color", "green");
			$("#nicknameMes").css("font-weight", "bold");
			$("#nicknameMes").html("√");
			regFlag1 = true;
		} else {
			
			$("#nicknameMes").css("color", "red");
			$("#nicknameMes").html("请输入5-8位的中文、英文、或数字");
			resetSlider();
		}
	}

	//注册，判断账号是否合格
	function regUsernameCheck() {
		var regUsername = $("#regUsername").val();
		var path = "${pageContext.request.contextPath}";
		var regUsernameExp = /^[A-Za-z0-9]{3,15}$/;
		if (regUsernameExp.test(regUsername)) {
			console.log("panduan")
			//满足正则表达式后判断是否已经被注册了
			$.ajax({
				url : path+"/UserinfoController?action=isSame",
				type : "post",
				data : {regUsername : regUsername},
				success : function(data) {
				if ("have" == data) {
						$("#regUsernameMes").css("color", "red");
						$("#regUsernameMes").html("账号已存在，请重新输入");
						resetSlider();
					} 
					else {
						$("#regUsernameMes").css("color", "green");
						$("#regUsernameMes").css("font-weight", "bold");
						$("#regUsernameMes").html("√");
						regFlag2 = true;
					}
				}
			});
		} 
		else {
			$("#regUsernameMes").css("color", "red");
			$("#regUsernameMes").html("请输入3-15位的大小写字母或者数字");
			resetSlider();
		}

	}

	//注册，判断密码是否合格
	function regUserpassCheck() {
		var regUserpass = $("#regUserpass").val();
		var regUserpassExp = /^[A-Za-z0-9]{6,12}$/;
		if (regUserpassExp.test(regUserpass)) {
			$("#regUserpassMes").css("color", "green");
			$("#regUserpassMes").css("font-weight", "bold");
			$("#regUserpassMes").html("√");
			regFlag3 = true;
		} else {
			$("#regUserpassMes").css("color", "red");
			$("#regUserpassMes").html("请输入6-12位的大小写字母或者数字");
			resetSlider();
		}
	}

	//注册页面表单提交
	function regFormSubmit() {
		if (verification == false) {
			$("#regSliderMes").css("color", "red");
			$("#regSliderMes").html("验证码错误");
			return false;
		}
		if (regFlag1 == true && regFlag2 == true && regFlag3 == true) {
			$("#addFrom").submit();
		} 
		else {
			alert("注册失败,请重试 :(");
			return false;
		}
	}

	$(function() {
		initSileder();
		$("#nickname").on("blur", nicknameCheck);
		$("#regUsername").on("blur", regUsernameCheck);
		$("#regUserpass").on("blur", regUserpassCheck);
		$("#regSubmit").on("click",regFormSubmit);
	});
</script>

</html>
